<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { isEmpty } from 'lodash'
import WinnerDialog from './components/WinnerDialog.vue'
import ImportRuleDialog from './components/ImportRuleDialog.vue'
import Particles from './components/Particles.vue'

// 抽奖逻辑同你原代码
const rawNames = ref<string[]>(['张三', '李四', '王五', '赵六'])
const nameList = ref<string[]>([...rawNames.value])
const winners = ref<string[]>([])
const current = ref('准备中...')
const isDrawing = ref(false)
const showResult = ref(false)
const showImportTip = ref(false)

let animationId = 0

function roll() {
  const available = nameList.value.filter(name => !winners.value.includes(name))
  if (available.length === 0)
    return
  current.value = available[Math.floor(Math.random() * available.length)]
  animationId = requestAnimationFrame(roll)
}

function toggleDraw() {
  if (isDrawing.value) {
    cancelAnimationFrame(animationId)
    isDrawing.value = false
    if (!winners.value.includes(current.value)) {
      winners.value.push(current.value)
    }
    showResult.value = true
    return
  }
  if (winners.value.length >= nameList.value.length)
    return
  isDrawing.value = true
  roll()
}

async function handleUpload(file: File) {
  const text = await file.text()
  const names = text
    .split(/\r?\n/)
    .map(n => n.trim())
    .filter(Boolean)

  const uniqueNames = Array.from(new Set(names))
  if (uniqueNames.length !== names.length) {
    ElMessage.info('名单包含重复项，已自动去重')
  }

  if (uniqueNames.some(name => /[^a-z\u4E00-\u9FA5]/i.test(name))) {
    ElMessage.error('名单包含特殊字符，只允许中文或英文')
    return
  }

  rawNames.value = uniqueNames
  nameList.value = [...uniqueNames]
  winners.value = []
  current.value = '准备中...'
  showImportTip.value = false
}

function reset() {
  winners.value = []
  nameList.value = [...rawNames.value]
  current.value = '准备中...'
}

function toggleFullScreen() {
  const el = document.documentElement
  if (!document.fullscreenElement) {
    el.requestFullscreen?.()
  }
  else {
    document.exitFullscreen?.()
  }
}
</script>

<template>
  <Particles />

  <div class="draw-container">
    <div class="top-bar">
      <el-button type="info" plain @click="showImportTip = true">
        导入名单（txt）
      </el-button>
      <el-button type="warning" plain @click="toggleFullScreen">
        全屏显示
      </el-button>
      <el-button type="danger" plain @click="reset">
        重置抽奖
      </el-button>
    </div>

    <div class="display-area">
      <div class="rolling-text">
        {{ current }}
      </div>
    </div>

    <el-button
      type="primary"
      size="large"
      class="draw-button"
      :disabled="isEmpty(nameList) || winners.length === nameList.length"
      @click="toggleDraw"
    >
      {{ isDrawing ? '停止抽奖' : '开始抽奖' }}
    </el-button>
  </div>

  <WinnerDialog v-model:visible="showResult" :winner="current" />
  <ImportRuleDialog v-model:visible="showImportTip" @upload="handleUpload" />
</template>

<style lang="scss" scoped>
.draw-container {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 95vh;
  color: white;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  padding: 20px;
  z-index: 2;
  .top-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 30px;
  }

  .display-area {
    width: 600px;
    height: 140px;
    background: radial-gradient(circle, #ffe259, #ffa751);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px #ff9a00;
    animation: glow 2s infinite alternate;
    margin-bottom: 40px;

    .rolling-text {
      font-size: 52px;
      font-weight: bold;
      color: #1b1b1b;
    }
  }

  .draw-button {
    background: linear-gradient(to right, #ff416c, #ff4b2b);
    color: white;
    font-size: 20px;
    padding: 14px 36px;
    border-radius: 999px;
    box-shadow: 0 0 20px #ff4b2b;
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px #ff9a00;
  }
  100% {
    box-shadow: 0 0 30px #ff6a00;
  }
}
</style>
